<template>
  <div id="province" style="width: 1052px; height: 100%;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {

  name: "Province",
  props: {
    fileName: String,
  },
  data() {
    return {
      option: {
        series: [
          {
            name: "省份数据",
            type: "map",
            map: "province",
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      try {
        const provinceJSON = require("./province/" + this.fileName);

        const myChart = echarts.init(document.getElementById("province"));
        echarts.registerMap("province", provinceJSON);
        myChart.setOption(this.option);

        myChart.on("click", (params) => {
              // 控制台打印数据的名称
              console.log(params.name);
              this.toDetailCity(params.name)
            }
        );
      } catch (e) {
        alert(`暂无${this.fileName}数据`);
        this.$emit("toMap");
      }
    },

    //跳转详细城市
    async toDetailCity(cityName) {

      let cityId = await this.$store.dispatch("detail/getCityId", cityName);

      if (cityId.code == 200) {
        await this.$store.dispatch("detail/getIdCityList", cityId.data);
        this.$router.push("/detail/" + cityId.data);
      } else {
        alert(`暂无${cityName}数据`);
        this.$emit("toMap");
      }
    },

  },
};
</script>

<style scoped lang="less">

</style>
